<template>
    <div class="home-page" v-loading="loginpage">
        <!-- <el-dialog title="提示" :visible.sync="dialogVisiblelogin" width="30%" :before-close="handleCloseLogin">
            <div class="login-container">
                <div class="login-formbox">
                    <div class="logintet">
                    </div>
                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="90px" class="login-form">
                        <el-form-item label="Name" prop="username">
                            <el-input v-model="loginForm.username" placeholder="name"></el-input>
                        </el-form-item>
                        <el-form-item label="Password" prop="password">
                            <el-input type="password" v-model="loginForm.password" placeholder="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="width: 210px;" plain type="primary" @click="loginbtn"
                                :disabled="isLoginFormInvalid">Login</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-dialog> -->
        <el-container>
            <el-header style="padding: 0;" v-if="!showheader">
                <div class="overlay-mask"></div>
                <!-- 顶部 -->
                <div class="top-section">
                    <div class="logos">
                        <img src="@/assets/livelogo.png" alt="">
                    </div>


                    <div class="bell">
                        <button @click="openDialog('chat')">
                            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z"
                                    fill="currentColor"></path>
                            </svg>
                            <span style="color: #fff;vertical-align: top;"> <b style="color: red;font-weight: 20px;">●</b>
                                {{ topCode }}</span>
                        </button>
                    </div>


                    <div class="loginnew" @click="openLogin()" v-if="loginstatus">
                        <span class="nbduwqhdui213csacsac">LOGIN</span>
                    </div>


                    <div class="headerImg" v-else>
                        <img src="../../assets/zaw.jpg" alt="">
                        <span class="userstylespan" id="userNameOne" style="margin-right: 30px;color: #fff;">{{
                            dataToStore.name }}</span>

                        <div class="quitBtn">
                            <button class="signupBtn" @click="showConfirm('q')">
                                LOGOUT
                            </button>
                        </div>
                    </div>



                </div>
            </el-header>
            <el-main>

                <div class="iudfwqegy21793yh">
                    <div class="ujdhnwqydb2313h293">
                        <div class="video-player video-player-1646">
                            <!-- Cover image container -->
                            <div class="cover-container-1646" v-if="showCover1646">
                                <img class="cover-image-1646" :src="coverImage1646" alt="Video cover">
                                <div class="cover-overlay-1646" @click="handlePlay1646">
                                    <div class="play-button-1646">
                                        <svg class="play-icon-1646" viewBox="0 0 24 24">
                                            <path d="M8 5v14l11-7z" fill="currentColor" />
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <!-- Video iframe -->
                            <!-- <iframe :src="video_url" style="border: none;" allowfullscreen width="100%"
                                height="100%"></iframe> -->
                            <div style="width: 100%;height: 100%;">
                                <videopaly v-if="videoUrl" style="width: 100%;height: 100%;" :video-url="videoUrl" />
                            </div>
                        </div>
                        <div class="mnudh9wq7eh2194h135">
                            <!-- 显示区域 -->
                            <div class="xian500">{{ bieming }}</div>
                            <div class="messageBox" ref="messageBox">
                                <div class="gsdwfxcxz231asd" v-if="zdzkg">
                                    <!-- <div class="asd1">置顶消息：</div> -->
                                    <div v-if="zdflag" class="asd2">{{ zdtxt }}</div>
                                    <!-- <img v-else src="@/assets/ws.png" @click="wstz()" class="ttyyhh" alt=""> -->

                                    <button v-else class="whatsapp-button" @click="wstz()">
                                        <svg class="whatsapp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                            fill="white">
                                            <path
                                                d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                                        </svg>
                                        My WhatsApp
                                    </button>
                                </div>
                                <div class="zx1" :style="zdzkg ? { top: '34px' } : { top: '0' }">
                                    <div class="z0z1" style="font-weight: 500;">{{ bieming }}</div>
                                    <div class="bmol">Online Users：
                                        <b style="color: red;">{{ olnum }}</b>
                                    </div>
                                </div>
                                <div v-for="(message, index) in messages" :key="index" class="chat-message"
                                    :style="{ paddingTop: message.imgbuer ? '0' : '8px' }">
                                    <div class="usermessage">
                                        <img v-if="!message.imgbuer" :src="message.userAvatar" :alt="message.user"
                                            class="user-avatar" />
                                        <!-- @click="openDialog('charuser', message)" -->
                                        <strong v-if="!message.imgbuer" class="userText"
                                            :style="{ color: message.user === homeData.name ? '#ff7d00' : '#2b94ff' }">
                                            {{ message.user }}
                                        </strong>

                                        <div class="rmk" v-if="homeData.role_id == 1 && message.remark">
                                            remark:{{ message.remark }}
                                        </div>
                                        <button v-show="message.message_id !== '0' && homeData.role_id == 1"
                                            @click="showConfirm('4', message)">
                                            review
                                        </button>
                                        <button class="tywe1"
                                            v-show="message.user != 'System messages' && homeData.role_id == 1"
                                            @click="zhiding(message.message, message.href)">Pin
                                        </button>
                                        <div class="beizhu" v-if="message.role == 7 && homeData.role_id == 1">
                                            <svg t="1748311193396" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="5130" width="20" height="20">
                                                <path
                                                    d="M757.461333 597.333333a96 96 0 0 1 96 96v38.613334A160 160 0 0 1 797.696 853.333333C730.88 910.677333 635.306667 938.709333 512 938.709333c-123.306667 0-218.794667-28.032-285.482667-85.333333a160 160 0 0 1-55.722666-121.344v-38.698667A96 96 0 0 1 266.794667 597.333333h490.666666zM507.648 85.632L512 85.333333a32 32 0 0 1 31.701333 27.690667l0.298667 4.309333v32h149.333333a96 96 0 0 1 96 96v192.213334a96 96 0 0 1-96 96h-362.666666a96 96 0 0 1-96-96V245.333333A96 96 0 0 1 330.666667 149.333333h149.333333v-32a32 32 0 0 1 27.648-31.701333L512 85.333333l-4.352 0.298667zM416 277.333333a53.333333 53.333333 0 1 0 0 106.624 53.333333 53.333333 0 0 0 0-106.624z m191.701333 0a53.333333 53.333333 0 1 0 0 106.624 53.333333 53.333333 0 0 0 0-106.624z"
                                                    fill="#212121" p-id="5131"></path>
                                            </svg>
                                            Bot
                                            <!-- Remark：
                                        {{ message.remark !== null ? `(${message.remark})` : '' }} -->
                                        </div>
                                        <p v-if="!message.imgbuer" style="color: #000;font-size: 13px;margin-left: 5px;">
                                            {{ message.time }}
                                        </p>
                                    </div>

                                    <div class="chat-innerHTML">
                                        <span v-if="message.message && !message.href && !message.imgbuer" class="xxxx">{{
                                            message.message
                                        }}</span>
                                        <a v-if="message.href" :href="message.href" target="_blank"
                                            rel="noopener noreferrer" class="add-teacher-btn">
                                            ➕ Contact Teacher
                                        </a>

                                        <span class="csaq1" v-if="message.message && !message.href && message.imgbuer">{{
                                            message.message
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 发送区域 -->
                            <div class="send">
                                <div class="emoji_home" v-show="emoFlag">
                                    <emoji @emoji-selected="handleEmojiSelected"></emoji>
                                </div>
                                <textarea v-model="inputValue" id="multilineInput" maxlength="125"
                                    style="width: 100%;resize: none;padding: 5px;" name="multilineInput" :rows="rowstext"
                                    placeholder="Hello" cols="50"></textarea>
                                <div class="funcSend">
                                    <div class="zx2">Online : <b style="color: #e7ff00;">{{ olnum }}</b>
                                    </div>
                                    <button @click="openDialog('chat')" class="btn500 sdxc">Message</button>
                                    <div class="btn500" @click="showConfirm('q')">Exit</div>
                                    <span @click="emojiOn('2')" class="ndlwqjhdu34">
                                        😄
                                    </span>
                                    <button @click="sendBtn" :disabled="isButtonDisabled">{{ isButtonDisabled ?
                                        `${remainingTime} s` : 'Send' }}</button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="kjhd7y3021yhiudb">
                        <div class="video-container-1755">
                            <div class="video-item-1755" v-for="(item, index) in videoList1755" :key="index"
                                @click="showAlert1755">
                                <div class="video-thumbnail-1755">
                                    <img :src="item.thumb" alt="">
                                    <div class="video-mask-1755"></div>
                                    <div class="play-btn-1755" @click.stop="showAlert1755">
                                        <svg viewBox="0 0 24 24" width="48" height="48">
                                            <path d="M8 5v14l11-7z" fill="#fff" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="video-title-1755">{{ item.title }}</div>
                            </div>
                        </div>
                    </div>

                </div>
            </el-main>
        </el-container>
        <el-dialog :visible.sync="dialogVisible" :title="dialogTiele" :width="widthDialog" @close="handleClose">
            <!-- 用户详情 -->
            <div class="dialogbox" v-show="dialogOpt">
                <div class="dialogbox-data">
                    <img :src="dialogdata.url" alt="">
                    <span>username：{{ dialogdata.user }}</span>
                </div>
                <div class="dialogbox-btn">
                    <button v-show="flagbtn !== '0'" @click="chatGo()" class="Pchat">private chat</button>
                </div>
            </div>
            <!-- 私聊列表 -->
            <div class="privateChat" v-show="!dialogOpt">
                <div class="chatList">
                    <!--  @click="chatListuser(message, index)" -->
                    <div v-for="(message, index) in chatList" :key="index" class="chat-user"
                        :class="{ 'onDiaChat': selectedIndex == index }">
                        <img :src="message.userAvatar" :alt="message.user" class="user-avatar" />
                        <div class="user-right">
                            <strong class="userText" :style="{ color: '#2b94ff', fontSize: '14px' }">{{ message.user
                            }}</strong>
                            <span :class="{ 'unread': message.unread === 'unread' }">
                                {{ message.unread === 'unread' ? 'Thereis new news' : 'No news' }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="chatMessage" v-loading="overlayVisible">
                    <div class="messageBox" ref="messageBoxChat">
                        <div v-for="(message, index) in messagesDia" :key="index" class="chat-message chat-message2"
                            :class="{ 'oneself': message.code == 'right' }">
                            <div class="chat-innerHTML chat-innerHTML2" :class="{ 'right-item': message.code == 'right' }">
                                <div style="font-size: 12px;margin-bottom: 8px;color: blue;">
                                    {{
                                        message.time
                                    }}
                                </div>
                                <span>{{ message.message }}</span>
                            </div>

                        </div>
                    </div>
                    <div class="messageSend">
                        <div class="send" style="height: 100%;">
                            <div class="emoji_home" v-show="emoFlagdia">
                                <emoji @emoji-selected="handleEmojiSelectedDia"></emoji>
                            </div>
                            <textarea v-model="inputValueDia" id="multilineInput" maxlength="150" :readonly="isReadonly"
                                style="width: 100%; resize: none; padding: 5px;" name="multilineInput" rows="4"
                                cols="50"></textarea>
                            <div class="funcSend">
                                <span @click="emojiOn('1', toClientId)">
                                    😄
                                </span>
                                <button @click="sendBtnDia" :disabled="isButtonDisabled">{{ isButtonDisabled ? `
                                                                    ${remainingTime} s` : 'Send' }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisibleLogin" :title="dialogTieleLogin" :width="selectedVideoUrl()"
            @close="handleCloseLogin" style="height: 100%;" class="bgbg" top="20vh" :show-close="true" v-loading="lgn"
            :close-on-click-modal="false">
            <!-- 背景 -->
            <!-- <div class="loginbg">
                <video class="full-screen-video-element" autoplay loop muted>
                    <source :src="require('@/assets/video/bgbg.mp4')" type="video/mp4">
                </video>
            </div> -->
            <!-- 登录 -->
            <div class="login-container">
                <div class="login-formbox">
                    <div class="logintet">
                        <div class="tettit">live-stock</div>
                    </div>
                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                        <el-form-item label="Name" prop="username">
                            <el-input v-model="loginForm.username" placeholder="name"></el-input>
                        </el-form-item>
                        <el-form-item label="Password" prop="password">
                            <el-input type="password" v-model="loginForm.password" placeholder="password"></el-input>
                        </el-form-item>
                        <!-- <el-form-item>
                            <el-button style="width: 210px;" plain type="success" @click="loginbtn"
                                :disabled="isLoginFormInvalid">
                                Login
                            </el-button>
                        
                        </el-form-item> -->
                        <div class="nbudiwyh17892uypud" @click="loginbtn">
                            Login
                        </div>
                    </el-form>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import emoji from "../emoji/index.vue";
import { loginApi, build_client_room, sendMsg, shenyuemsg, siliao, tuichu, lishi, chushi, getren } from "../../utils/api";
// import AgoraVideoCall from "@/components/AgoraVideoCall.vue";
import videopaly from "@/components/videopaly.vue";
export default {
    name: 'HomePage',
    components: {
        emoji,
        // AgoraVideoCall,
        videopaly


    },
    data() {
        return {
            videoUrl: '',
            zdzkg: false,// 置顶总开关
            zdflag: false,// 置顶文字按钮切换
            zdtxt: '',// 置顶文字 / 链接地址
            loginstatus: true,
            showCover1646: false, // control whether to show the cover
            coverImage1646: require('@/assets/g1.png'), // replace with your cover image path
            // ... your existing data
            messages: [], // 存放消息的数组
            messagesDia: [],
            emoFlag: false, // emo开关
            emoFlagdia: false,
            inputValue: '',// 输入框文字
            inputValueDia: '',
            isButtonDisabled: false,
            dialogVisible: false, // 控制弹窗显示隐藏的数据属性
            dialogVisibleLogin: false, // 控制弹窗显示隐藏的数据属性
            dialogdata: {
                user: '',
                url: '',
                clientId: '',
                toClientId: '',
                code: '',
                sendUserId: '',

            },
            dialogOpt: false, // 私聊弹窗或用户详情显示
            dialogTiele: '',// 私聊弹窗或用户详情标题
            dialogTieleLogin: '',// 登录弹窗标题
            widthDialog: null,// 私聊弹窗或用户宽度
            chatList: [],// 私聊弹窗元素数据
            selectedIndex: null,// 私聊弹窗左侧列表id
            overlayVisible: true,// 私聊弹窗列表遮罩层
            loginpage: false,// 总遮罩层
            loginForm: {
                username: '',
                password: ''
            },// 登录输入框
            loginRules: {
                username: [{ required: true, message: 'please enter user name', trigger: 'blur' }],
                password: [{ required: true, message: 'Please enter password', trigger: 'blur' }]
            },// 登录验证
            dataToStore: {},// 登录成功的数据保存
            homeData: {
                system_id: null,
                room_id: null,
                system_name: '',
                clientId: '',
                name: '',
                role_id: null,
                user_id: null,
                remark: '',// 备注
                video_url_m3u8: '',
                video_url: ''
            },// 接口所需参数保存
            isConnected: false, // WebSocket状态
            message: '', // WebSocket消息（暂时未用）
            socket: null, // WebSocket实例
            setTime: 0, // 延时渲染时间
            olnum: 0, // 在线数字
            arrchat: [], // 动态元素的数据存储，
            toClientId: '', // 私聊对象的ws Id
            sendUserId: '', // 自己的 ws Id
            flagbtn: '', // 私聊按钮显示开关
            topCode: 0, // 私聊信息小铃铛数字
            isReadonly: true, // 私聊消息区加载动画
            video_url: '', // 视频地址
            video_url_m3u8: '', // 手机端视频地址
            screenWidth: window.innerWidth, // 当前屏幕宽度
            dtwinth: '65%', // 弹窗宽度
            showheader: false, // 顶部元素显示开关
            rowstext: 2, // 聊天区显示行数
            isUKTimeZone: false, //时区
            videoList1755: [
                { thumb: require('@/assets/g2.png'), title: 'LIVE: Fast Bulls' },
                { thumb: require('@/assets/g3.png'), title: 'LIVE: Trend Gold' },
                { thumb: require('@/assets/g4.png'), title: 'LIVE: Volume Code' },
                { thumb: require('@/assets/g5.png'), title: 'LIVE: Swing Strike' }
            ],
            apiData: null,
            loginflag: false,
            bieming: '',//别名
            lgn: false

        };
    },
    created() {
        // 立即执行一次
        this.ger_ren();

        // 每3秒轮循
        this.intervalId = setInterval(() => {
            this.ger_ren();
        }, 3000);

        // 在组件创建时添加窗口大小变化的监听器
        window.addEventListener('resize', this.handleResize);
    },
    computed: {
        // 表单校验
        isLoginFormInvalid() {
            return this.$refs.loginForm && this.$refs.loginForm.validate() !== true;
        },
        // 移动/PC 视频源切换

    },

    mounted() {

        const apiData = localStorage.getItem('apiData') || null;
        if (apiData) {
            this.loginflag = true
            this.apiData = JSON.parse(apiData);
            this.loginstatus = false
        }
        this.screenWidth = window.innerWidth;
        if (this.screenWidth < 760) {
            // this.dtwinth = '100%'
            // this.showheader = true
            this.rowstext = 1
        }
        else if (this.screenWidth > 761 && this.screenWidth < 1201) {
            this.rowstext = 3
        }
        else if (this.screenWidth > 1201) {
            this.rowstext = 4
        }
        this.chushihua()
        // 获取url参数
        this.homeData.system_id = this.$route.query.system_id || ''
        this.homeData.room_id = this.$route.query.room_id || ''


        // 从localStorage中检索apiData
        // const storedApiDataString = localStorage.getItem('apiData');
        // if (storedApiDataString) {
        //     try {
        //         const storedApiData = JSON.parse(storedApiDataString);

        //         if (storedApiData && storedApiData.token) {
        //             this.dataToStore = storedApiData
        //             // 接口所需参数存储
        //             this.homeData.system_name = storedApiData.system_name
        //             this.homeData.room_name = storedApiData.room_name
        //             this.homeData.name = storedApiData.name
        //             this.homeData.role_id = storedApiData.role_id
        //             this.homeData.user_id = storedApiData.uid
        //             this.homeData.remark = storedApiData.remark
        //             this.homeData.video_url = storedApiData.video_url
        //             this.homeData.video_url_m3u8 = storedApiData.video_url_m3u8
        //             this.video_url = storedApiData.video_url
        //             this.video_url_m3u8 = storedApiData.video_url_m3u8

        //             this.olnum = storedApiData.number_people // 在线人数
        //             this.dialogVisibleLogin = false // 关闭登录弹窗
        //             this.setupWebSocket() // 连接WebSocket
        //             this.$nextTick(() => {
        //                 this.lishixiaoxi();//获取历史消息
        //             })

        //             console.log(1)

        //         } else {
        //             // Token不存在
        //             console.log('Token不存在,请重新登录');
        //         }
        //     } catch (error) {
        //         console.error('解析apiData时发生错误', error);
        //     }
        // }
        // this.adjustTime(this.isUKTimeZone);

        // this.lishixiaoxi();//获取历史消息
        this.isUKTimeZone = this.checkIfUKTimeZone();
    },
    destroyed() {
        // 在组件销毁时移除监听器，防止内存泄漏
        window.removeEventListener('resize', this.handleResize);
    },
    updated() {
        // 更新聊天显示区
        this.scrollToBottom();
    },
    methods: {
        async ger_ren() {
            const res = await getren().catch((err) => {
                return console.error(err);
            });
            if (res?.data && res?.data?.code == "200" && res?.data?.data?.count) {
                console.log(res.data.data, 'Number of people');
                this.olnum = res.data.data.count
            } else {
                console.log(res);
            }
        },
        wstz() {
            console.log(this.zdtxt, 'tz');
            window.open(this.zdtxt, '_blank'); // 新标签页
        },
        zhiding(msg, href) {
            this.$confirm('Are you sure you want to pin this message? The currently pinned message will be replaced.', 'Prompt', {
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel',
                type: 'info'
            }).then(() => {
                this.sendMessage({ msg: msg ? msg : `[${href}]`, zhidingFlag: true })
            }).catch(() => {

            });

        },
        async chushihua() {
            const res = await chushi().catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                this.videoUrl = res.data.data.room_config.video_url
                this.bieming = res.data.data.room_config.room_alias
                if (this.loginflag) {
                    this.homeData.room_id = this.apiData.room_id
                    this.homeData.room_name = this.apiData.room_name
                    this.homeData.system_id = this.apiData.system_id
                    this.homeData.system_name = this.apiData.system_name
                    this.homeData.role_id = this.apiData.role_id
                    this.homeData.name = this.apiData.name
                    this.homeData.user_id = this.apiData.sendUserId
                } else {
                    this.homeData.room_id = res.data.data.room_config.room_id
                    this.homeData.room_name = res.data.data.room_config.room_name
                    this.homeData.system_id = res.data.data.room_config.system_id
                    this.homeData.system_name = res.data.data.room_config.system_name
                }
                // this.olnum = Number(res.data.data.room_config.room_peoples) || 145
                const historyData = res?.data?.data.historyMsgList; // 新的数据结构

                const firstMessage = Object.values(historyData)[0]; // 获取第一条消息

                if (firstMessage?.code == 2) { // 使用可选链防止undefined
                    this.zdzkg = true

                    if (/\[(.*?)\]/.test(firstMessage.msg)) {
                        const match = firstMessage.msg.match(/\[(.*?)\]/);

                        // 检查是否是 WhatsApp 链接
                        const whatsappRegex = /^https?:\/\/wa\.me\/\+?\d+$/;
                        if (whatsappRegex.test(match[1])) {
                            console.log('这是一个 WhatsApp 链接');
                            this.zdflag = false
                            this.zdtxt = match[1];
                        } else {
                            console.log('中括号内不是 WhatsApp 链接');
                            this.zdflag = true
                            this.zdtxt = match[1]; // 如果不是 WhatsApp 链接，仍然赋值
                        }
                    } else {
                        this.zdtxt = firstMessage.msg
                    }
                } else {
                    this.zdzkg = false
                }
                if (historyData) {
                    Object.values(historyData).forEach(message => {
                        setTimeout(() => {
                            if (/\[(.*?)\]/.test(message.msg)) {
                                const match = message.msg.match(/\[(.*?)\]/);
                                if (match && match[1]) {
                                    console.log('中括号内的值是：', match[1]);
                                    this.appendMessage({
                                        user: message.send_name,
                                        message: message.msg,
                                        message_id: '0',
                                        toClientId: '0',
                                        sendUserId: '0',
                                        time: this.adjustTime(),
                                        remark: message.remark || '',
                                        href: match[1],
                                        role: message.role_id
                                    });
                                }
                            } else {
                                this.appendMessage({
                                    user: message.send_name,
                                    message: message.msg,
                                    message_id: '0',
                                    toClientId: '0',
                                    sendUserId: '0',
                                    time: this.adjustTime(),
                                    remark: message.remark || '',
                                    href: false,
                                    role: message.role_id
                                });
                            }
                        }, 100);
                    });
                }

                console.log(this.homeData, '初始化完成');
                this.setupWebSocket() // 连接WebSocket
            } else {
                console.log(1)
            }
        },
        selectedVideoUrl() {
            return window.innerWidth > 500 ? '440px' : '98%';
        },
        showAlert1755() {
            alert('Coming Soon');
        },
        handlePlay1646() {
            // This method will be called when play button is clicked
            this.showCover1646 = !this.showCover1646; // hide the cover when playing
            // Add your play logic here
        },
        // 获取当前时间
        adjustTime() {
            const now = new Date();

            // 始终减去 13 小时
            const adjustedTime = new Date(now.getTime() - 13 * 60 * 60 * 1000);

            const adjustedHour = this.formatNumber(adjustedTime.getHours());
            const adjustedMinute = this.formatNumber(adjustedTime.getMinutes());
            const adjustedSecond = this.formatNumber(adjustedTime.getSeconds());

            return `${adjustedHour}:${adjustedMinute}:${adjustedSecond}`;
        },
        formatNumber(value) {
            // 确保数字始终显示为两位数，如果需要，添加前导零
            return value < 10 ? `0${value}` : value;
        },
        checkIfUKTimeZone() {
            // 获取当前时间减去 13 小时的时间
            const minus13Hours = new Date(Date.now() - 13 * 60 * 60 * 1000);

            setTimeout(() => {
                console.log(minus13Hours.toLocaleString(), '减去13小时后的时间');
            }, 2000);

            // 返回这个时间对象，或者它的格式化形式
            return minus13Hours.toLocaleString();

        },
        handleResize() {
            // 处理窗口大小变化事件
            this.screenWidth = window.innerWidth;
            if (this.screenWidth < 700) {
                this.dtwinth = '100%'
                this.showheader = true
                this.rowstext = 1
            } else {
                this.rowstext = 4
            }
        },
        // 登录
        async loginbtn() {
            this.lgn = true
            const data = {
                name: this.loginForm.username,
                password: this.loginForm.password,
                system_id: 3,
                room_id: 3
            }
            const res = await loginApi(data).catch((err) => {
                this.lgn = false
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                this.lgn = false
                this.dataToStore = res.data.data
                localStorage.setItem('apiData', JSON.stringify(this.dataToStore));// 存储登录数据
                // 接口所需参数存储
                // this.homeData.system_name = res.data.data.system_name
                // this.homeData.room_name = res.data.data.room_name
                // this.homeData.name = res.data.data.name
                // this.homeData.role_id = res.data.data.role_id
                // this.homeData.user_id = res.data.data.uid
                // this.homeData.remark = res.data.data.remark
                // this.homeData.video_url = res.data.data.video_url
                // this.homeData.video_url_m3u8 = res.data.data.video_url_m3u8

                // this.video_url = res.data.data.video_url
                // this.video_url_m3u8 = res.data.data.video_url_m3u8

                // this.olnum = res.data.data.number_people // 在线人数
                this.dialogVisibleLogin = false // 关闭登录弹窗
                location.reload()

            } else {
                this.lgn = false
                this.$message.warning(res.data.msg)
                console.log(1)
            }
        },
        async lishixiaoxi() {
            const data = {
                system_id: this.homeData.system_id,
                room_id: this.homeData.room_id
            }
            const res = await lishi(data).catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                this.lishixiaoxifanxian(res.data.historyMsgList)// 历史消息反显
            } else {
                console.log(1)
            }
        },
        chatGo() {
            let foundMatch = false;
            for (const item of this.chatList) {
                // 私聊列表中已有该用户的聊天信息
                if (item.user === this.dialogdata.user) foundMatch = true
            }
            if (!foundMatch) {
                this.appendChat(this.dialogdata.user, this.dialogdata.toClientId, this.dialogdata.sendUserId)
            }
            this.dialogdata = {
                user: '',
                url: '',
                clientId: '',
                toClientId: '',
                code: '',
                sendUserId: ''
            }
            this.dialogOpt = false;
            this.dialogTiele = 'Private chat list'
            this.widthDialog = this.dtwinth
            this.showOverlay()
            setTimeout(() => {
                this.disOverlay()
            }, 500);
            foundMatch = false
        },
        // 获取历史消息
        lishixiaoxifanxian(historyMsgList) {
            historyMsgList.forEach(message => {
                setTimeout(() => {
                    this.appendMessage(message.send_name, message.msg, '0', '0', '0', message.add_time, message.remark)
                }, 100);
            });
        },
        // 绑定用户到房间
        async bindUser() {
            let data = {}
            if (this.loginflag) {
                data = {
                    room_id: this.homeData.room_id,
                    system_id: this.homeData.system_id,
                    role_id: this.homeData.role_id,
                    client_id: this.homeData.clientId,
                    system_name: this.homeData.system_name,
                    room_name: this.homeData.room_name,
                    name: this.homeData.name,
                    login: 1
                }
            } else {
                data = {
                    room_id: this.homeData.room_id,
                    system_id: this.homeData.system_id,
                    role_id: 9,
                    client_id: this.homeData.clientId,
                    system_name: this.homeData.system_name,
                    room_name: this.homeData.room_name,
                    name: '游客045',
                    login: 0
                }
            }
            const res = await build_client_room(data).catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {

                if (this.loginflag) {
                    console.log('token');
                } else {
                    this.homeData.role_id = res.data.data.roleId
                    this.homeData.name = res.data.data.userName
                    this.homeData.user_id = res.data.data.uid
                }
                if (this.loginflag && (res.data.data.role_id == 9 || res.data.data.roleId == 9)) {
                    // localStorage.removeItem('apiData');// 删除浏览器存储
                    // location.reload();
                }
                this.bangdingData = res.data.data
            } else if (res.data && res.data.code == "401") {
                localStorage.removeItem('apiData');// 删除浏览器存储
                location.reload();
            }
            else {
                console.log(1)
            }
        },
        // WebSocket连接
        setupWebSocket() {
            // console.log(this.homeData.system_name, 'WebSocket参数');
            this.socket = new WebSocket(`wss://live-stock.live/ws?systemId=LIVE-STOCK`);
            // this.socket = new WebSocket(`wss://www.live-stock.org/ws?systemId=${this.homeData.system_name}`);

            // 监听WebSocket打开
            this.socket.onopen = () => {
                this.isConnected = true;

            };

            // 监听WebSocket消息
            this.socket.onmessage = (event) => {

                let eventData = JSON.parse(event.data)

                // if (eventData.msg == '客户端上线' || eventData.msg == '客户端下线') {
                //     this.homeData.role_id = ?     判断roleid
                //     if (this.olnum && this.olnum > 10 && eventData.msg == '客户端上线') {
                //         this.olnum = this.olnum + 1
                //     }
                //     if (this.olnum && this.olnum > 10 && eventData.msg == '客户端下线') {
                //         this.olnum = this.olnum - 1
                //     }
                //     if (this.homeData.role_id != 1) {
                //         return
                //     } else {
                //         if (eventData.msg == '客户端上线') {

                //             this.appendMessage({ user: 'System messages', message: 'Client online' + ' - ' + eventData.userName, message_id: '0', toClientId: eventData.clientId, sendUserId: eventData.sendUserId, time: this.adjustTime(), remark: eventData.remark, href: false, role: eventData.roleId })

                //         }
                //         if (eventData.msg == '客户端下线') {

                //             this.appendMessage({ user: 'System messages', message: 'Client offline' + ' - ' + eventData.userName, message_id: '0', toClientId: eventData.clientId, sendUserId: eventData.sendUserId, time: this.adjustTime(), remark: eventData.remark, href: false, role: eventData.roleId })

                //         }

                //     }

                // }
                if (eventData.code == 0) {
                    this.homeData.clientId = eventData.data.clientId
                    // 绑定房间
                    this.bindUser()
                } else if (eventData.code == 1 || eventData.code == 1004 || eventData.code == 1005) {

                    if (/\[(.*?)\]/.test(eventData.msg)) {

                        const match = eventData.msg.match(/\[(.*?)\]/);
                        if (match && match[1]) {
                            console.log('中括号内的值是：', match[1]);

                            this.appendMessage({ user: eventData.userName, message: eventData.msg, message_id: eventData.messageId, toClientId: eventData.clientId, sendUserId: eventData.sendUserId, time: this.adjustTime(), remark: false, href: match[1], role: eventData.roleId })

                        }
                    } else if (eventData.userName !== this.homeData.name) {

                        this.appendMessage({ user: eventData.userName, message: eventData.msg, message_id: eventData.messageId, toClientId: eventData.clientId, sendUserId: eventData.sendUserId, time: this.adjustTime(), remark: false, href: false, role: eventData.roleId })

                    }
                }
                else if (eventData.code == 1001) {
                    if (this.homeData.role_id == 1) {
                        this.appendMessage({ user: 'System messages', message: 'Client online' + ' - ' + eventData.userName, message_id: '0', toClientId: eventData.clientId, sendUserId: eventData.sendUserId, time: this.adjustTime(), remark: eventData.remark, href: false, role: eventData.roleId })
                    }

                } else if (eventData.code == 1002) {
                    if (this.homeData.role_id == 1) {
                        this.appendMessage({ user: 'System messages', message: 'Client offline' + ' - ' + eventData.userName, message_id: '0', toClientId: eventData.clientId, sendUserId: eventData.sendUserId, time: this.adjustTime(), remark: eventData.remark, href: false, role: eventData.roleId })

                    }
                }
                else if (eventData.code == 2) {


                    if (/\[(.*?)\]/.test(eventData.msg)) {

                        const match = eventData.msg.match(/\[(.*?)\]/);
                        if (match && match[1]) {
                            console.log('中括号内的值是：', match[1]);

                            // 检查是否是 WhatsApp 链接
                            const whatsappRegex = /^https?:\/\/wa\.me\/\+?\d+$/;
                            if (whatsappRegex.test(match[1])) {
                                console.log('这是一个 WhatsApp 链接');
                                this.zdflag = false
                                this.zdtxt = match[1];
                            } else {
                                console.log('中括号内不是 WhatsApp 链接');
                                this.zdflag = true
                                this.zdtxt = match[1]; // 如果不是 WhatsApp 链接，仍然赋值
                            }
                        }
                    } else {
                        this.zdflag = true
                        this.zdtxt = eventData.msg
                    }




                    // this.topCode++
                    // let foundMatch = false;

                    // for (const item of this.chatList) {
                    //     // 私聊列表中已有该用户的聊天信息
                    //     if (item.user === eventData.userName) {
                    //         const msg = eventData.msg
                    //         const time = this.adjustTime()
                    //         // 将信息时间存储到该用户
                    //         item.msg.push({ msg, time });
                    //         item.unread = 'unread'
                    //         // 区分消息类型
                    //         if (eventData.msg.substring(0, 2) === '=>') {
                    //             this.appendMessageDia(eventData.msg.substring(2), 'right', time)
                    //         } else {
                    //             this.appendMessageDia(eventData.msg, 'left', time)
                    //         }
                    //         this.$forceUpdate();
                    //         foundMatch = true;
                    //         break; // 找到匹配项后跳出循环
                    //     }
                    // }

                    // if (!foundMatch) {
                    //     this.appendChat(eventData.userName, eventData.clientId, eventData.sendUserId, eventData.msg, 'unread', this.adjustTime());

                    // }
                }


            }

            // 监听WebSocket关闭
            this.socket.onclose = () => {
                this.isConnected = false;
                // console.log('WebSocket关闭');
            };

            // 监听WebSocket错误
            this.socket.onerror = (error) => {
                console.error('WebSocket Error:', error);
            };
        },
        // 关闭WebSocket连接
        closeWebSocket() {
            if (this.socket) {
                this.socket.close();
            }
        },
        beforeDestroy() {
            this.closeWebSocket()
            // 销毁前清除定时器
            clearInterval(this.intervalId);
        },
        // 在聊天框创建新消息
        appendMessage({ user, message, message_id, toClientId, sendUserId, time, remark, href, role }) {
            if (href) {
                if (user == 'System messages') {
                    this.messages.push({
                        user,
                        message: '',
                        userAvatar: '', // 设置用户头像的路径
                        message_id,
                        toClientId,
                        sendUserId,
                        time,
                        remark,
                        href,
                        imgbuer: true,
                        role
                    });
                } else {
                    this.messages.push({
                        user,
                        message: '',
                        userAvatar: require('../../assets/zaw.jpg'), // 设置用户头像的路径
                        message_id,
                        toClientId,
                        sendUserId,
                        time,
                        remark,
                        href,
                        imgbuer: false,
                        role
                    });
                }
            } else {
                if (user == 'System messages') {
                    this.messages.push({
                        user,
                        message,
                        userAvatar: '', // 设置用户头像的路径
                        message_id,
                        toClientId,
                        sendUserId,
                        time,
                        remark,
                        imgbuer: true,
                        role
                    });
                } else {
                    this.messages.push({
                        user,
                        message,
                        userAvatar: require('../../assets/zaw.jpg'), // 设置用户头像的路径
                        message_id,
                        toClientId,
                        sendUserId,
                        time,
                        remark,
                        imgbuer: false,
                        role
                    });
                }
            }


        },
        // 在私聊列表创建新用户 用户名、发送消息的对方toClientId,自己的toClientId,消息原文，自己/他人消息,time:发送消息的时间
        appendChat(user, toClientId, sendUserId, msg, unread, time) {
            if (msg || time) {
                this.chatList.push({
                    user,
                    userAvatar: require('../../assets/zaw.jpg'), // 设置用户头像的路径
                    toClientId,
                    sendUserId,
                    unread,
                    msg: [{ msg, time }]
                });
            } else {
                this.chatList.push({
                    user,
                    userAvatar: require('../../assets/zaw.jpg'), // 设置用户头像的路径
                    toClientId,
                    sendUserId,
                    unread,
                    msg: []
                });
            }
        },
        // 在私聊列表中添加消息
        appendMessageDia(message, code, time) {
            this.messagesDia.push({
                message,
                code,
                time
            });
        },
        // 私聊列表右侧消息
        chatListuser(message, index) {
            // 存储当前列表消息和时间
            this.arrchat = message.msg

            this.toClientId = message.toClientId
            this.sendUserId = message.sendUserId
            // 更新索引
            this.selectItem(index)
            this.messagesDia = [];
            this.isReadonly = false

            this.showOverlay()
            // 当前点击用户的消息列表和时间
            message.msg.forEach(item => {
                // “=>”为自己发送的消息，单独添加类名
                if (item.msg.substring(0, 2) === '=>') {
                    this.appendMessageDia(item.msg.substring(2), 'right', item.time)
                } else {
                    this.appendMessageDia(item.msg, 'left', item.time)
                }
            });
            message.unread = ''
            setTimeout(() => {
                this.disOverlay()
            }, 500);

        },
        // 聊天区输入框和添加表情
        handleEmojiSelected(emoji) {
            this.inputValue += emoji;
            this.emojiOn('2')
        },
        // 私聊区输入框和添加表情
        handleEmojiSelectedDia(emoji) {
            this.inputValueDia += emoji;
            this.emojiOn('1')
        },
        // 打开表情选择区域 1：私聊区 / 2：聊天区
        emojiOn(code, cid) {
            if (code == '1') {
                if (cid !== '') {
                    this.emoFlagdia = !this.emoFlagdia

                } else {
                    console.log(1)
                }
            } else {
                this.emoFlag = !this.emoFlag
            }
        },
        scrollToBottom() {
            // 滚动到容器底部
            if (this.$refs.messageBox) {
                this.$refs.messageBox.scrollTop = this.$refs.messageBox.scrollHeight;
            }
            if (this.$refs.messageBoxChat) {
                this.$refs.messageBoxChat.scrollTop = this.$refs.messageBoxChat.scrollHeight;
            }
        },
        // 聊天区发送按钮
        sendBtn() {
            if (this.inputValue !== '') {
                this.sendMessage({ msg: this.inputValue, zhidingFlag: false })
                this.inputValue = ''
                this.isButtonDisabled = true;
                this.remainingTime = 3;
                const timer = setInterval(() => {
                    this.remainingTime -= 1;

                    if (this.remainingTime <= 0) {
                        this.isButtonDisabled = false;
                        clearInterval(timer);
                    }
                    this.$forceUpdate();
                }, 1000);
            } else {
                this.sendMessage({ msg: 'Hi..', zhidingFlag: false })
                this.isButtonDisabled = true;
                this.remainingTime = 3;
                const timer = setInterval(() => {
                    this.remainingTime -= 1;

                    if (this.remainingTime <= 0) {
                        this.isButtonDisabled = false;
                        clearInterval(timer);
                    }
                    this.$forceUpdate();
                }, 1000);
            }

        },
        // 退出登录接口
        async quitAjax() {
            const res = await tuichu().catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                this.closeWebSocket() // 退出ws
                localStorage.removeItem('apiData');// 删除浏览器存储
                location.reload();
            } else {
                console.log(1)
            }
        },
        generateRandom() {
            this.randomNumber = Math.floor(10000 + Math.random() * 90000);
        },
        // 聊天区发送信息接口
        async sendMessage({ msg, zhidingFlag }) {
            const data = {
                name: this.homeData.name,
                room_id: this.homeData.room_id,
                system_id: this.homeData.system_id,
                user_id: this.homeData.user_id,
                system_name: this.homeData.system_name,
                room_name: this.homeData.room_name,
                role_id: this.homeData.role_id,
                client_id: this.homeData.clientId,
                msg: msg
            }
            if (zhidingFlag) {
                data.code = 2
            }

            const res = await sendMsg(data).catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {

                // 自己的消息
                if (!zhidingFlag) {
                    if (/\[(.*?)\]/.test(msg)) {
                        const match = msg.match(/\[(.*?)\]/);
                        if (match && match[1]) {
                            console.log('中括号内的值是：', match[1]);
                            this.appendMessage({ user: this.homeData.name, message: msg, message_id: '0', toClientId: '0', sendUserId: '0', time: this.adjustTime(), remark: null, href: match[1], role: this.homeData.role_id })

                        }
                    } else {
                        this.appendMessage({ user: this.homeData.name, message: msg, message_id: '0', toClientId: '0', sendUserId: '0', time: this.adjustTime(), remark: null, href: false, role: this.homeData.role_id })
                    }
                }

            } else {
                console.log(1)
            }
        },
        handleEnterKey(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();  // 阻止默认换行
                this.sendBtnDia();   // 触发发送
            }
            // 如果按下 Shift + Enter，仍然可以换行
        },
        // 私聊区发送按钮
        sendBtnDia() {
            if (this.inputValueDia !== '') {
                const data = {
                    to_client_id: this.toClientId,
                    send_client_id: this.homeData.clientId,
                    to_user_id: this.sendUserId,
                    msg: this.inputValueDia,
                    data: ''
                }
                const time = this.adjustTime()
                // 调用发送接口
                this.sendBtnDiaMsg(data)
                // 私聊消息列表中添加新消息
                this.appendMessageDia(this.inputValueDia, 'right', time)
                // 将新消息和时间存储到引用类型地址的变量中，直接修改元数据添加到私聊列表数据组中
                this.arrchat.push({ msg: '=>' + this.inputValueDia, time })
                this.inputValueDia = ''
                this.isButtonDisabled = true;
                this.remainingTime = 3;
                const timer = setInterval(() => {
                    this.remainingTime -= 1;
                    if (this.remainingTime <= 0) {
                        this.isButtonDisabled = false;
                        clearInterval(timer);
                    }
                    this.$forceUpdate();
                }, 1000);
            } else {
                console.log(1)
            }

        },
        async sendBtnDiaMsg(data) {
            const res = await siliao(data).catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                console.log(1)
            } else {
                console.log(1)
            }
        },
        // 私聊退出审阅等按钮中转二次确认
        showConfirm(code, msg) {
            let textbtn;
            switch (code) {
                case '3':
                    textbtn = 'private chat'
                    break;
                case 'q':
                    textbtn = 'quit'
                    break;
                case '4':
                    textbtn = 'review'
                    break;
                default:
                    break;
            }
            this.$confirm(`Whether to perform"${textbtn}"operation？`, 'Confirm action', {
                confirmButtonText: 'Sure',
                cancelButtonText: 'Cancel',
                type: 'warning',
            })
                .then(() => {
                    // 用户点击确定按钮时触发的回调
                    if (code == 'q') {
                        this.dialogVisibleLogin = true;
                        this.quitAjax()
                        // window.location.reload()
                    }
                    if (code == '4' && msg) {
                        this.shenyuebtn(msg)
                    }
                    if (code == '3') {
                        this.shenyuebtn(msg)
                    }
                })
                .catch(() => {
                    // 用户点击取消按钮时触发的回调
                });
        },
        // 审阅按钮
        async shenyuebtn(msg) {
            const data = {
                message_id: msg.message_id
            }
            const res = await shenyuemsg(data).catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                msg.message_id = '0'
            } else {
                console.log(1)
            }
            console.log(1)
        },
        // 私聊框和详细信息判断
        openDialog(msg, message) {
            // console.log(msg, message, 'ggggggggggggggggggggggg');
            this.dialogVisible = true;

            if (msg == 'chat') {
                this.topCode = 0
                this.dialogOpt = false;
                this.dialogTiele = 'Private chat list'
                this.widthDialog = this.dtwinth
                this.showOverlay()

                setTimeout(() => {
                    this.disOverlay()
                }, 500);
            } else {
                this.dialogOpt = true;
                this.dialogTiele = 'User details'
                this.widthDialog = this.dtwinth
                this.$nextTick(() => {
                    this.dialogdata.user = message.user
                    this.dialogdata.url = message.userAvatar
                    this.dialogdata.clientId = message.clientId
                    this.dialogdata.toClientId = message.toClientId
                    this.dialogdata.sendUserId = message.sendUserId
                })
                if (message.message_id == '0' || message.sendUserId == '0' || message.toClientId == '0' || message.clientId == '') {
                    this.flagbtn = '0'
                } else {
                    console.log(1)
                    this.flagbtn = '1'
                }
            }


        },
        openLogin() {
            this.dialogVisibleLogin = true;
        },
        handleClose() {
            this.dialogVisible = false;

            this.messagesDia = [];
            this.isReadonly = true
            this.toClientId = ''
            // console.log('弹窗已关闭');
        },
        handleCloseLogin() {
            this.dialogVisibleLogin = false;
            // console.log('弹窗已关闭');
        },
        // 点击列表项时更新选中项的索引
        selectItem(index) {
            this.selectedIndex = index;
        },
        // 聊天列表遮罩层
        showOverlay() {
            this.overlayVisible = true;
        },
        disOverlay() {
            this.overlayVisible = false;
        },
    },
};
</script>
  
<style lang="less">
.add-teacher-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #409eff;
    /* Vue Element UI 主色 */
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s;
    margin: 10px 0;
}

.add-teacher-btn:hover {
    background-color: #66b1ff;
}

.el-header {
    background-image: linear-gradient(to top, #cc208e 0%, #6713d2 100%);
}

#multilineInput {

    /* 重置边框 */
    border: none;
    /* 或自定义边框 */
    border: 1px solid #333;
    border-radius: 5px;
    /* 重置背景 */

    /* 移除轮廓线（focus时的外边框） */
    outline: none;

}

.rmk {
    font-size: 12px;
}

.el-form-item {
    margin-bottom: 20px !important;
    display: flex;
    flex-direction: column;
}

.el-form-item__label {
    width: 100% !important;
    text-align: left !important;

}

.el-form-item__content {
    margin: 0;
}

.zx2 {
    display: none;
}

.nbudiwyh17892uypud {
    width: 100%;
    height: 40px;
    background-color: #3429ff;
    border: 1px #0d00ff solid;
    border-radius: 4px;
    margin: 0 auto;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    cursor: pointer;
}

.nbudiwyh17892uypud:hover {
    background-color: #0d00ff;
}

.csaq1 {
    font-size: 12px !important;
    color: #abaaaa;
}

.logintet {
    width: 400px;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin: 0;
    margin-bottom: 25px;

    .tettit {
        width: 100%;
        font-size: 14px;
        color: #4c727e;
        padding: 20px 0 10px 0;
        text-align: center;
        font-weight: 700;
        font-size: 32px;
        margin: 0 auto;
    }
}

.btn500 {
    display: none;
}

.xian500 {
    display: none;
}

.el-form-item__label {
    // color: #fff;
}

.loginbg {
    height: 100%;
    width: 100%;

    .full-screen-video-element {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

// .bgbg .el-dialog__header {
//     display: none;
// }

.bgbg .el-dialog {
    overflow: hidden !important;
}

.el-dialog__body {
    height: 100%;
    padding: 20px;
}

.login-container {
    // position: fixed;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);

    // height: 100vh;
}

.login-formbox {
    // padding: 25px 120px 25px 80px;
    // background-color: rgba(0, 0, 0, 0.8);
    // border-radius: 10px;
}

.login-form {

    width: 400px;

}

.oneself {
    display: flex;
    justify-content: end;
}

.right-item {
    width: 50% !important;
    background: #89d961 !important;
    padding: 15px !important;
    color: #000 !important;
    border-radius: 8px !important;
}

.onDiaChat {
    background-color: #c9c7c6 !important;
}

.iudfwqegy21793yh {
    height: 100%;
    padding-top: 15px;
}

.privateChat {
    border: 1px #000 solid;
    border-radius: 5px;
    padding: 15px;
    width: 100%;
    height: 600px;
    display: flex;
    flex-wrap: nowrap;
    background-color: #f5f5f5;

    .chatList {
        padding: 10px;
        width: 35%;
        height: 100%;
        border: #333 1px solid;
        border-radius: 5px;
        background-color: #e1dfde;
        overflow-y: auto;

        img {
            width: 50px;
            height: 50px;
        }

        .chat-user {
            background-color: #e1dfde;
            display: flex;
            padding: 15px 0;
            cursor: pointer;

            .user-right {
                margin-left: 15px;
                display: flex;
                flex-direction: column;

            }
        }

        .chat-user:hover {
            background-color: #c9c7c6;
        }
    }

    .chatMessage {
        margin-left: 10px;
        width: 65%;
        height: 100%;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .messageBox {
            flex: 1;
            width: 100%;

            border: 1px #000 solid;
            border-radius: 8px 8px 0 0;
        }

        .chat-message2 {
            border: none !important;

            .chat-innerHTML2 {
                width: 70%;
                padding: 15px;
                background-color: #fff;
                border-radius: 8px;
                color: #000;
            }
        }

        .messageSend {
            width: 100%;
            height: 22%;
            border: #333 1px solid;
            border-radius: 5px;
        }
    }

    .chatList::-webkit-scrollbar {
        width: 10px;
    }

    .chatList::-webkit-scrollbar-thumb {
        background-color: #333;
    }

    .chatList::-webkit-scrollbar-track {
        background-color: #e1dfde;
    }

    .chatList::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    /* Firefox 样式 */
    .chatList {
        scrollbar-width: thin;
        scrollbar-color: #333 #f5f5f5;
    }

    .chatList::-moz-scrollbar {
        width: 10px;
    }

    .chatList::-moz-scrollbar-thumb {
        background-color: #333;
    }

    .chatList::-moz-scrollbar-track {
        background-color: #f5f5f5;
    }
}

.home-page {
    // background-image: url('../../assets/9.jpg');
    // background-repeat: no-repeat;
    // background-size: cover;
    height: 100vh;
    background-color: #f4f5f8;
}

.st0 {
    fill: #bc2991
}

.overlay-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.top-section {
    width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    // background-image: linear-gradient(to top, #cc208e 0%, #6713d2 100%);
    border-bottom: 1px #31400bf2 solid;
    padding: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    height: 100%;
    position: relative;

    .bell {
        display: none;
        margin-right: 20px;

        button {
            background: none;
            border: none;
            padding: 15px 15px;
            border-radius: 10px;
            cursor: pointer;
        }

        button:hover {
            background: rgba(170, 170, 170, 0.062);
            transition: 0.5s;
        }

        button svg {
            color: #fff;
        }
    }
}

.el-main {
    height: 100vh;
    padding: 0 !important;
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);

}

.el-row {
    height: 90%;
    padding: 0 11%;
}

.el-col {
    height: 100%;
}

.video-player {
    width: 840px;
    height: 600px;
}

.messageBox {
    flex: 1;
    // position: relative;
    border: #fff 1px solid;
    // border-radius: 5px;
    width: 100%;
    max-height: 600px;
    height: 470px;
    background-color: #fff;
    overflow-y: scroll;
    padding: 0 10px 15px 10px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    border-radius: 8px 8px 0 0;

    // -ms-overflow-style: none;


    .chat-message {
        margin-bottom: 20px;
        border-bottom: 1px #ecebeb solid;
        padding: 8px 10px;

        .chat-innerHTML {
            width: 100%;
            overflow: hidden;
            word-wrap: break-word;

            span {
                font-size: 14px;
                // display: flex;
                // align-items: center;
            }
        }

        .usermessage {
            display: flex;
            align-items: center;

            strong {
                vertical-align: super;
                font-weight: 500;
                font-size: 14px;
                margin: 0 10px;
                cursor: pointer;
            }

            img {
                width: 30px;
                height: 30px;
                border-radius: 30px;
                // cursor: pointer;
            }

            button {
                background-color: #4caf50;
                color: #fff;
                padding: 2px 5px;
                cursor: pointer;
                border: none;

            }

            .tywe1 {
                background-color: #e31a3e;
                color: #fff;
                padding: 2px 5px;
                cursor: pointer;
                border: none;
                margin-left: 5px;
            }
        }
    }


}

.send {
    padding: 8px 10px 20px 10px !important;
    width: 100%;
    // height: 24%;
    background-color: #fff;
    // border-radius: 7px;
    // min-height: 200px;
    position: relative;
    border-radius: 0 0 8px 8px;
    height: 130px;

    .funcSend {
        display: flex;
        justify-content: flex-end;
        min-height: 20px;

        button {
            width: 80px;
            padding: 5px 20px;
            font-size: 14px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            background-color: #4CAF50;
            color: #fff;
            height: 100%;
        }

        button:hover {
            background-color: #f404c0fa;
        }

        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        span {

            width: 35px;
            height: 35px;
            font-size: 20px;
            cursor: pointer;
            user-select: none;
            height: 100%;
        }
    }
}

.emoji_home {
    position: absolute;
    bottom: 100%;
    width: 95%;
    height: 100%;
}

.quitBtn {

    // display: none;
    align-items: center;
    justify-content: end;

    .signupBtn {

        // width: 90px;
        height: 40px;
        border-radius: 5px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        border: 1px #494949 solid;

        font-size: 14px;
        padding: 5px 8px;
        background-color: #fff;
        font-weight: 700;
        color: #010101;
    }

    .arrow {
        position: absolute;
        right: 7.5px;
        background-color: rgb(255, 255, 255);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        transition: all .5s ease;
    }

    .signupBtn:hover .arrow {
        width: calc(120px - (7.5px)*2);
    }


}

.messageBox::-webkit-scrollbar {
    width: 10px;
}

.messageBox::-webkit-scrollbar-thumb {
    background-color: #333;
}

.messageBox::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

.messageBox::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* Firefox 样式 */
.messageBox {
    scrollbar-width: thin;
    scrollbar-color: #333 #f5f5f5;
}

.messageBox::-moz-scrollbar {
    width: 10px;
}

.messageBox::-moz-scrollbar-thumb {
    background-color: #333;
}

.messageBox::-moz-scrollbar-track {
    background-color: #f5f5f5;
}

.dialogbox {
    .dialogbox-data {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            width: 60px;
            height: 60px;
            margin-bottom: 15px;
        }
    }

    .dialogbox-btn {
        display: flex;
        justify-content: center;
        margin-top: 25px;

        button {
            cursor: pointer;
            margin: 0 10px;
            padding: 5px 15px;
        }
    }
}

.headerImg {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 40px;
        height: 40px;
        // margin-right: 10px;
        border-radius: 20px;
    }
}

.userText {
    color: #2b94ff;
    font-size: 14px
}

.Pchat {
    background-color: #ff7d00;
    color: #fff;
}

.zx1 {
    font-size: 13px;
    background-color: #e3e5e6;
    color: #333;
    // border-radius: 4px;
    text-align: center;
    margin-bottom: 15px;
    position: sticky;
    top: 40px;
    padding: 5px 0;
    display: flex;
    justify-content: space-around;

    .bmol {
        font-weight: 500;
    }
}

.gsdwfxcxz231asd {
    font-size: 14px;
    background-color: #e3e5e6;

    // border-radius: 4px;
    text-align: center;
    position: sticky;
    top: 0;
    font-weight: 700;
    display: flex;
    flex-direction: column;

    .asd1 {
        color: #333;
    }

    .asd2 {
        color: #eb1010;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        width: 97%;
    }

    .whatsapp-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 24px;
        background-color: #25D366;
        color: white;
        font-family: Arial, sans-serif;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
    }

    .whatsapp-button:hover {
        background-color: #128C7E;
    }

    .whatsapp-icon {
        margin-right: 10px;
        width: 20px;
        height: 20px;
    }

    .ttyyhh {
        height: 40px;
        width: 150px;
        margin: 0 auto;
        cursor: pointer;
    }
}

.beizhu {
    font-size: 12px;
    color: #000;
    background-color: #cdcdcd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    padding: 0 3px;
    // display: none;
}

.unread {
    color: red;
}

@media screen and (max-height: 801px) {
    // .send .funcSend span {
    //     font-size: 14px;
    // }

    // .send .funcSend button {
    //     font-size: 14px;
    //     padding: 0;
    // }
}

@media screen and (max-width: 1080px) {}





@media screen and (max-width: 450px) {

    // .funcSend {
    //     display: flex;
    //     justify-content: space-between !important;

    //     .zx2 {
    //         display: block;
    //         font-size: 14px !important;
    //         line-height: 28px !important;
    //     }

    //     .btn500 {
    //         display: block !important;
    //         min-width: 50px;
    //         text-align: center;
    //         line-height: 24px !important;
    //         display: block;
    //         font-size: 12px;
    //         background-color: #2b94ff;
    //         color: #fff;
    //         padding: 3px 6px;
    //     }

    // }


}

.sdxc {
    min-width: 50px;
    text-align: center;
    line-height: 24px !important;
    font-size: 12px;
    background-color: #2b94ff;
    color: #fff;
    padding: 3px 6px;
    border-radius: 0;
    width: auto;
}

.ujdhnwqydb2313h293 {
    display: flex;
    width: 1300px;
    height: 600px;
    margin: 0 auto;
    justify-content: space-between;
}

.mnudh9wq7eh2194h135 {
    width: 450px;
    height: 600px;
}

/* Video player container */
.video-player-1646 {
    position: relative;
    // width: 100%;
    // height: 100%;
}

/* Cover container */
.cover-container-1646 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}

/* Cover image */
.cover-image-1646 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Cover overlay (shown on hover) */
.cover-overlay-1646 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

.cover-container-1646:hover .cover-overlay-1646 {
    opacity: 1;
}

/* Play button */
.play-button-1646 {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.play-button-1646:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.play-icon-1646 {
    width: 30px;
    height: 30px;
    color: white;
    margin-left: 4px;
}

.logos {
    width: 330px;
    height: 60px;

    img {
        width: 100%;
        height: 100%;
    }
}

.kjhd7y3021yhiudb {
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.video-container-1755 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.video-item-1755 {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s;
}

.video-item-1755:hover {
    transform: translateY(-5px);
}

.video-thumbnail-1755 {
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.video-thumbnail-1755 img {
    width: 100%;
    display: block;
    aspect-ratio: 16/9;
}

/* 遮罩层：悬停时才显示 */
.video-mask-1755 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(114, 114, 114, 0.3);
    opacity: 0.5;
    /* 固定透明度，可调整 0.3~0.6 */
    /* 删除 transition 和 :hover 相关代码 */
}

.video-item-1755:hover .video-mask-1755 {
    opacity: 1;
}


/* 播放按钮：始终显示 */
.play-btn-1755 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
    /* 固定显示，可调整透明度 */
}

.video-item-1755:hover .play-btn-1755 {
    transform: translate(-50%, -50%) scale(1.05);
    /* 悬停时轻微放大 */
}

.video-title-1755 {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// @media (max-width: 1200px) {
//     .video-container-1755 {
//         grid-template-columns: repeat(2, 1fr);
//     }
// }
.loginnew {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
}

.nbduwqhdui213csacsac {
    font-size: 14px;
    height: 100%;
    padding: 5px 8px;
    background-color: #fff;
    font-weight: 700;
    color: #010101;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

@media screen and (min-width: 500px) and (max-width: 1200px) {

    html,
    body {
        touch-action: manipulation;
    }



    // .funcSend {
    //     display: flex;
    //     justify-content: space-between !important;

    //     .zx2 {
    //         display: block;
    //         font-size: 14px !important;
    //         line-height: 28px !important;
    //     }

    //     .btn500 {
    //         display: block !important;
    //         min-width: 50px;
    //         text-align: center;
    //         line-height: 24px !important;
    //         display: block;
    //         font-size: 12px;
    //         background-color: #2b94ff;
    //         color: #fff;
    //         padding: 3px 6px;
    //     }

    // }

    .xian500 {
        display: block;
        height: 25px;
        text-align: left;
        width: 100%;
        background-color: #2b94ff;
        color: #fff;
    }





    .el-main {
        // height: 100vh;
        width: 100vw;
        padding: 0 !important;
    }

    .el-row {
        height: 100%;
        padding: 10px 5px;
    }

    .el-col {
        height: 35%;
        width: 100% !important;
    }

    .el-col-7 {
        height: 53%;
        // margin-top: 10px;
        padding: 0 !important;
        border: none;
    }

    .send {
        border-radius: 0;
        height: 17%;
        background-color: #fff;
    }

    .kjhd7y3021yhiudb {
        width: 100%;
        max-width: none;
    }

    .headerImg img {
        width: 25px;
        height: 25px;
    }

    .video-player {
        width: 60%;
        margin-right: 15px;
    }

    .mnudh9wq7eh2194h135 {
        width: 40%;
    }

    .ujdhnwqydb2313h293 {
        width: 100%;
    }

    .top-section .bell button {
        padding: 5px 10px 5px 0;
    }

    .quitBtn .signupBtn {
        width: 105px;
    }

    .el-dialog__body {
        width: 100%;
    }

    .privateChat .chatList img {
        width: 25px;
        height: 25px;
    }

    .chat-message {
        padding: 0;
    }

    .zx1 {
        display: none;
    }

    .chat-message {
        border: none !important;
    }

    .xxxx {
        margin-left: 20px;
        margin-top: 10px;
    }
}


@media screen and (max-width: 499px) {
    .userText {
        margin: 0 5px !important;
    }

    .el-message-box {
        width: 90% !important;
        max-width: 90% !important;
    }

    .logintet {
        width: 100%;


    }

    .loginnew {
        margin-right: 25px;
    }

    .nbduwqhdui213csacsac {
        height: 70%;
    }

    .login-form {
        width: 100%;
    }

    .xian500 {
        // display: block !important;
        // height: 25px;
        // text-align: center;
        width: 100%;
        background-color: #e49212;
        color: #0d00ff;
        font-weight: 500;
        // padding-left: 30px;
        display: flex !important;
        justify-content: start;
        align-items: center;
        padding-left: 10px;
    }

    html,
    body {
        touch-action: manipulation;
    }

    .home-page {
        background: #fff !important;
    }

    .el-main {
        height: calc(100vh - 45px);
        padding: 0 !important;
        background: none;
        overflow: hidden;
    }

    .el-row {
        height: 100%;
        padding: 10px 5px;
    }

    .el-col {
        height: 30%;
        width: 100% !important;
    }

    .el-col-7 {
        height: 68%;
        // margin-top: 10px;
        padding: 0 !important;
        border: none;
    }

    .send {
        border-radius: 0;
        // height: 15%;
        background-color: #f5f5f5;
    }

    .headerImg img {
        width: 25px;
        height: 25px;
    }

    .top-section .bell button {
        padding: 5px 10px 5px 0;

    }

    .quitBtn .signupBtn {
        width: 105px;
    }

    .el-dialog__body {
        width: 100%;
    }

    .privateChat .chatList img {
        width: 25px;
        height: 25px;
    }

    .chat-message {
        padding: 0;
    }

    .zx1 {
        display: none;
    }

    .chat-message {
        border: none !important;
        padding: 6px 4px;
    }

    .xxxx {
        margin-left: 20px;
        margin-top: 10px;
    }

    .ujdhnwqydb2313h293 {
        width: 100%;
        flex-direction: column;
        height: 100%;
        justify-content: start;
    }

    .kjhd7y3021yhiudb {
        display: none;
    }

    .video-player {
        width: 100%;
        height: 39%;
    }

    .funcSend {
        // width: 100%;
        height: 45px;
    }

    .mnudh9wq7eh2194h135 {
        width: 100%;
        height: 60%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .messageBox {
        // flex: 1;
        height: auto;
        max-height: none;
        padding: 0;
        border-radius: 0;
        padding-top: 34px;
    }

    .send {
        display: flex;
        position: static;
        background-color: #f1f1f1;
        padding-bottom: 0 !important;
        max-height: 46px;
        height: 46px;
    }

    .send .funcSend button {
        height: 30px;
        padding: 0;
        font-size: 16px;
        font-weight: 700;
        // display: none;
    }

    .btn500 {
        display: none;
    }

    .sdxc {
        text-align: center;
    }

    .iudfwqegy21793yh {
        height: 100%;
        padding-top: 0px;
    }

    .zx2 {
        display: block;
        position: absolute;
        right: 20px;
        top: 0;
        color: #e7ff00;

    }

    .el-header {
        height: 40px !important;

    }

    .top-section {
        // width: 100px;
        padding: 0;
        height: 40px;
        // background-image: linear-gradient(to top, #cc208e 0%, #6713d2 100%);
        border-bottom: 1px #31400bf2 solid;
    }

    .logos {
        width: 110px;
        height: 40px;
        left: 40px;
    }

    .headerImg {
        margin-right: 0;
    }

    #multilineInput {
        height: 30px;
        border: none;
        // margin-right: 10px;
        font-size: 16px;
        transform: scale(1);
        transform-origin: left top;
    }

    // .ndlwqjhdu34 {
    //     height: 45px;
    // }
    .send .funcSend span {
        height: 30px;
        display: none;
    }

    .gsdwfxcxz231asd {
        position: absolute;
        top: 24px;
        width: 100%;
        left: 0;
    }
}
</style>
  